<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>地址管理</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .content {
            margin: 0;
            padding: 0;
        }

        .textDes {
            background-color: #F2F2F2;
            vertical-align: center;
            line-height: 2rem;
            font-size: 0.8rem;
        }

        .addressList {
            background: rgba(255, 255, 255, 1);
            padding: 0.2rem;
			margin-bottom: 0.2rem;
        }

        .addressList .name {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .addressList .mobile {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .addressList .addr {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .addrOpt {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1.5rem;
            vertical-align: center;
            background: rgba(255, 255, 255, 1);
            border-top: 0.01rem solid rgba(238, 238, 238, 1);
            line-height: 1.5rem;
        }

        .default {
            font-size: 0.6rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
        }

        .editDel .edit {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
            line-height: 1.5rem;
        }

        .editDel .del {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(102, 102, 102, 1);
            line-height: 1.5rem;
        }

        .default .yes {
            height: 0.4rem;
            width: 0.4rem;
            background-color: #FF9326;
            border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
        }

        .default .no {
            height: 0.4rem;
            width: 0.4rem;
            background: rgba(221, 221, 221, 1);
            border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
        }

        .editDel {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            width: 20%;
        }

        .addBtn {
            width: 12rem;
            height: 2rem;
            background-color: #FE9326;
            color: #FFFFFF;
            border-radius: 2rem 2rem 2rem 2rem;
            text-align: center;
            line-height: 2rem;
            font-size: 0.8rem;
            font-family: MicrosoftYaHei;
            position: fixed;
            bottom: 3rem;
            margin: auto;
            left: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
        <!--<header class="bar bar-nav">-->
            <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
                <!--<span class="icon icon-left"></span>-->
                <!--返回-->
            <!--</a>-->
            <!--<h1 class="title">地址管理</h1>-->
        <!--</header>-->
        <nav class="bar bar-tab">
            <a class="tab-item" href="../index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="../category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" href="../cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item  active" href="../personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="textDes">&nbsp;&nbsp;收货人信息</div>
            <div class="address-container">
                <div class="addressList" onclick="selectAddress('1')">
                    <div class="name">联系人:袁飞龙</div>
                    <div class="mobile">联系电话:17085935130</div>
                    <div class="addr">联系地址:袁飞龙袁飞龙袁飞龙袁飞龙袁飞龙袁飞龙袁飞龙袁飞龙袁飞龙</div>
                    <div class="addrOpt">
                        <div class="default" onclick="changeDefault(this)">
                            <span class="no">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;默认地址</div>
                        <div class="editDel">
                            <div class="edit" onclick="editAddr(1)">编辑</div>
                            <div class="del" onclick="delAddr(1)">删除</div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="./addAddress.html">
                <div class="addBtn">添加地址</div>
            </a>
        </div>


        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="../js/index.js"></script>
</body>
<script>
	var source;
    $(function () {
        getMyAddress("1");
		source = location.search.split("=")[1];
    });
    /**
     * 修改默认地址
     */
    function changeDefault(obj,flId) {
		$(".default span").each(function(index,item){
			$(item).attr("class","no");
			$(item).html("&nbsp;&nbsp;&nbsp;&nbsp;");
		});
        if ($(obj).find("span").attr("class") == 'no') {
            $(obj).find("span").attr("class", "yes");
            $(obj).find("span").html("");
            $(obj).find("span").html("&nbsp;√&nbsp;");
			$.post(prefix+"/userAddress/api/changeDefaultAddress",{'addressId':flId},function(data){
				data = JSON.parse(data);
				if(data.code == 0){
					getMyAddress("1")
				}
			});
        }
    }
    function getMyAddress(userId) {
        $.getJSON(prefix + "/userAddress/api/getAddressByUserId", function (data) {
            var addressList = data.data;
			var addressHtml="";
            $.each(addressList, function (index, item) {
				if(item.flIsDefault == 1){
					addressHtml += '<div class="addressList" onclick="selectAddress(\''+item.flId+'\')">'+
										'<div class="name">联系人:'+item.flName+'</div>'+
										'<div class="mobile">联系电话:'+item.flPhone+'</div>'+
										'<div class="addr">联系地址: '+item.flProvince+item.flCity+item.flArea+item.flDetailAddr+'</div>'+
										'<div class="addrOpt">'+
											'<div class="default" onclick="changeDefault(this,\''+item.flId+'\')">'+
												'<span class="yes">&nbsp;√&nbsp;</span>&nbsp;默认地址</div>'+
											'<div class="editDel">'+
												'<div class="edit" onclick="editAddr(\''+item.flId+'\')">编辑</div>'+
												'<div class="del" onclick="delAddr(\''+item.flId+'\')">删除</div>'+
											'</div>'+
										'</div>'+
									'</div>';
				}else{
					addressHtml += '<div class="addressList" onclick="selectAddress(\''+item.flId+'\')">'+
										'<div class="name">联系人:'+item.flName+'</div>'+
										'<div class="mobile">联系电话:'+item.flPhone+'</div>'+
										'<div class="addr">联系地址: '+item.flProvince+item.flCity+item.flArea+item.flDetailAddr+'</div>'+
										'<div class="addrOpt">'+
											'<div class="default" onclick="changeDefault(this,\''+item.flId+'\')">'+
												'<span class="no">&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;默认地址</div>'+
											'<div class="editDel">'+
												'<div class="edit" onclick="editAddr(\''+item.flId+'\')">编辑</div>'+
												'<div class="del" onclick="delAddr(\''+item.flId+'\')">删除</div>'+
											'</div>'+
										'</div>'+
									'</div>';
				}
            });
			$(".address-container").html(addressHtml);
        });
    }
	/**
	 * 删除地址
	 */
	function delAddr(flId){
		$.post(prefix+"/userAddress/api/removeAddress",{'addressId':flId},function(data){
			data = JSON.parse(data);
			if(data.code == 0){
				getMyAddress("1");
			}
		});
	}
	/**
	* 编辑地址
	*/
	function editAddr(flId){
		window.location.href="./addAddress.html?addressId="+flId;
	}
	
	/**
	 * 选择地址
	 */
	function selectAddress(id){
		if(source == "select"){
			window.location.href="./payPage.html?addressId="+id;
		}
		
	}
</script>
</html>
